<template>
<div class="box">
<div class="list">
    <div class="articles" v-for="item in articleList" :key="item.id">
      <header>
        <h2>{{ item.title }}</h2>
        <p>{{ item.time }}</p>
      </header>
      <article>
        <p class="wenzhang">
          {{ item.content }}
        </p>
      </article>
      <footer>
        <span>所属分类：{{ item.classify }}</span>
        <p>作者：{{ item.author }}</p>
      </footer>
    </div>
    <div class="page">
      <button @click="prevPage">Prev</button>
      <span>{{ currentPage }} </span>
      <button @click="nextPage">Next</button>
      <!-- <input type="text" v-model.number="currentPage"> -->
      
    </div>
  </div>
</div>
  
</template>

<script>
export default {
  data() {
    return {
      articleList: [],
      //当前页码
      currentPage: 1,
      
    
    };
  },
  created(){
    this.getArticleList(this.currentPage)
  },
  methods: {
    //获取数据
    getArticleList(currentPage) {
      this.$http.get("blog",{
      params:{
        _page:currentPage,
        _limit:3
      }
      }
      ).then(
        (res) => {
          this.articleList = res.data;
          console.log(this.articleList);
        },
        (err) => {
          console.log(err);
        }
      );
    },
    //上一页
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
        this.getArticleList(this.currentPage);
      }
    },
    //下一页
    nextPage() {
      // if (this.currentPage < this.totalPages) {
      //   this.currentPage++;
      // }
      this.currentPage++;
      this.getArticleList(this.currentPage)
      console.log("f");
      
    },
  },
  // mounted() {
  //   this.getArticleList();
  // },
  // computed: {
  //   //总页数 数组长度 / 每页显示的页数
  //   totalPages() {
  //     return Math.ceil(this.articleList.length / this.itemsPerPage);
  //   },
  //   //每页显示的数据
  //   pageData() {
  //     const start = (this.currentPage - 1) * this.itemsPerPage;
  //     return this.articleList.slice(start, start + this.itemsPerPage);
  //   },
  // },
};
</script>

<style lang="less" scoped>
.box{
  max-width: 900px;
  height: 100%;
  margin: 10px auto;
}
.list {


  color: white;
  overflow: hidden;
      padding: 40px 40px 10px 40px;
  .articles {
    background-color: rgba(70, 64, 64, 0.646);
    border: 1px solid white;
    border-radius: 10px;
    background-clip: padding-box;
    margin-bottom: 10px;
   




    header {
      margin: 6px;
      h2 {
        display: inline-block;
      }
      p {
        float: right;
      }
    }
    article {
      margin: 6px;
      .wenzhang {
        text-indent: 2em;
      }
    }
    footer {
      margin: 6px;

      p {
        float: right;
      }
    }
  }
  .page {
    text-align: center;
    button {
      width: 40px;
      height: 30px;
      margin: 0px 10px;
      cursor: pointer;
    }
  }
}
</style>

